<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="./css/vant.index.css">
    <link rel="stylesheet" href="./css/iconfont.css">

    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/van_popup_morebtn.css">
    <link rel="stylesheet" href="./css/my_global_tabbar.css">
    <!-- <link rel="stylesheet" href="../css/sideinformation.css"> -->
    <link rel="stylesheet" href="./css/blt_sideinformation_v_2_0.css">
    <link rel="stylesheet" href="./css/blt_row_box.css">
    <link rel="stylesheet" href="./css/blt_box.css">
    <link rel="stylesheet" href="./css/blt_notice_bar.css">
    <link rel="stylesheet" href="./css/blt_readingbox.css">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            box-sizing: border-box;
            background: rgb(241, 241, 241);
            font-family: Open Sans, Helvetica Neue, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            overflow: auto;
        }

        [v-cloak] {
            display: none;
        }
        /*vue组件的css  start*/

        @media (min-width: 1540px) {
            .globalItem_tabbar {
                background-color: rgba(0, 0, 0, 0);
                border-bottom: rgba(0, 0, 0, 0);
            }
            .van-notice-bar__wrap {
                width: 100px;
            }
            .swipper-box {
                padding-left: 12%;
                padding-right: 12%;
            }
            .swipper-box img {}
        }
        /*vue组件的css  end*/

        .globalItem_action {
            position: fixed;
            right: 20px;
            bottom: 60px;
            width: 50px;
            height: 60px;
        }

        .globalItem_action .globaAction_item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            text-align: center;
            margin-bottom: 10px;
            opacity: 0.5;
        }

        .globalItem_action .globaAction_item span {
            display: block;
            line-height: 50px;
        }

        .globalItem_action .globaAction_item span.iconfont.icon-xiala_hover {
            font-size: 20px;
        }

        .swipper-box {
            width: 100%;
            margin: 0 auto;
        }

        .swipper-box img {
            width: 96%;
            margin-left: 2%;
            border-radius: 1em;
        }

        .sideInformation .info_panel {
            /*background-image: url('../images/1.png');
            background-size: cover;*/
        }

        .black_cover {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: black;
            opacity: 0.5;
            z-index: 1002;
        }

        .slide-fade-enter-active {
            transition: all .3s ease;
        }

        .slide-fade-leave-active {
            transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            opacity: 0;
        }

        .msglist {
            padding-top: 30px;
        }

        .loadMoreButton {
            width: 100%;
            padding-top: 30px;
            padding-bottom: 30px;
            text-align: center;
            font-size: 13px;
            color: #fff;
        }

        .footer_side {
            width: 100%;
            padding-bottom: 10px;
            text-align: center;
            font-size: 10px;
            color: #6c757d;
        }

        .loadMoreButton span {
            padding: 10px 40px;
            border-radius: 5px;
            background: #464646;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="globalItem_tabbar" id="globalItem_tabbar">
            <div class="head">
                <div class="global menuBtn"><span class="iconfont icon-gpszongheguanli" @click="ShowSide"></span></div>
                <h3>GAMECORES</h3>
                <div class="global searchBtn" onclick="window.location.href = './html/message.html';"><span class="iconfont icon-fenzu"></span></div>
            </div>
            <div class="gnav">
                <div class="gnav_body">
                    <a class="select">首页</a>
                    <a href="./html/news.html">资讯</a>
                    <a>文章</a>
                    <a>动态</a>
                    <a>话题</a>
                    <a @click="goToPublish">发布</a>
                    <a href="./html/Shoppingindex.html">商城</a>
                </div>
            </div>
        </div>

        <div class="msglist">
            <template>
                <div class="blt_notice_bar" v-show="isShowNotice">
                    <div class="notice_icon lift_icon"><i class="iconfont icon-shengyin"></i></div>
                    <marquee direction="left">
                        <font face="隶书" color="#ED6A0C" size="3">{{ gnotice }}</font>
                    </marquee>
                    <div class="notice_icon right_icon" v-on:click="NoShowNotice"><i class="iconfont icon-guanbi2" ></i></div>
                </div>
            </template>
            <!-- 轮播图 -->
            <div id="swipper-box">
                <div class="swipper-box">
                    <van-swipe :autoplay="3000" indicator-color="white" resize>
                        <van-swipe-item>
                            <img src="https://image.gcores.com/6ac4fee0-a2d9-4b22-8cd3-048497c1b9f1.jpg" alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="https://image.gcores.com/2ed25615-7a72-4981-b644-216820fb7360.jpg" alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="https://image.gcores.com/7a014366-2b1a-42df-bb13-b81624dff199.jpg" alt="">
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <div class="BLT_Row_Box">
                <div class="title"><span>最新资讯</span><i class="iconfont icon-jiantou3"></i></div>
                <div class="list">
                    <div class="item_body">
                        <div class="item" v-for="(it,index) in newsList" @click.stop="ReadingNew(index)" v-cloak>
                            <div class="message">
                                <div class="frontPicture"><img :src="it.frontPicture" alt=""></div>
                                <div class="first_title"> {{it.first_title}} </div>
                                <div class="bottom-bar">
                                    <div class="item">
                                        <span class="Informationdetails">{{it.ILike}} 喜欢 · {{it.IComment}} 评论 </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="BLT_Box" v-for="(it,index) in feedList" v-cloak>
                <div class="message" @click.stop="ReadingFeed(index)">
                    <div class="main-content">
                        <div class="face"><img :src="it.userPoint.blt_avatar" alt=""></div>
                        <div class="info-panel">
                            <div class="user-info"> {{it.userPoint.blt_name}}</div>
                            <div class="time"> {{it.publishTime}} </div>
                        </div>
                        <div class="more-button" @click.stop="ShowMoreBtn"><i class="iconfont icon-jinggao2"></i></div>
                    </div>
                    <div class="frontPicture"><img :src="it.frontPicture" alt=""></div>
                    <div class="first_title"> {{it.first_title}} </div>
                    <div class="second_title"> {{it.second_title}} </div>
                    <div class="bottom-bar">
                        <div class="item">
                            <span class="Informationtag">{{it.Itag}}</span>
                            <span class="Informationdetails"> {{it.ILike}} 喜欢 · {{it.IComment}} 评论 </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loadMoreButton">
                <span @click="loadMore">{{ moreBtnText }}</span>
            </div>
            <div class="footer_side">
                <span>All Rights Reserved &copy; 2019 BLT</span>
            </div>
        </div>
        <!-- 返回到顶部 start-->
        <div class="globalItem_action">
            <div class="globaAction_item" @click="ShowSide">
                <span class="iconfont icon-gpszongheguanli"></span>
            </div>
            <div class="globaAction_item">
                <a href=""><span class="iconfont icon-backtop"></span></a>
            </div>
        </div>
        <!-- 返回到顶部 end-->

        <!-- 更多弹窗 start-->
        <div class="testBtn" v-cloak>
            <van-popup v-model="showMore" round position="bottom" :style="{ height: '190px' }">
                <div class="moreItem">
                    <i class="iconfont icon-weixin" @mouseenter="enter(1)" @mouseleave="leave" v-bind:class="{hover_weixin:hover_index==1}"></i>
                    <p>微信</p>
                </div>
                <div class="moreItem">
                    <i class="iconfont icon-qq" @mouseenter="enter(2)" @mouseleave="leave" v-bind:class="{hover_qq:hover_index==2}"></i>
                    <p>QQ</p>
                </div>
                <div class="moreItem">
                    <i class="iconfont icon-weibo" @mouseenter="enter(3)" @mouseleave="leave" v-bind:class="{hover_weibo:hover_index==3}"></i>
                    <p>微博</p>
                </div>
                <div class="moreItem">
                    <i class="iconfont icon-jiantou3" @mouseenter="enter(4)" @mouseleave="leave" v-bind:class="{hover_more:hover_index==4}"></i>
                    <p>更多</p>
                </div>

                <div class="moreItem">
                    <i class="iconfont icon-love-b"></i>
                    <p>收藏</p>
                </div>

                <div class="moreItem">
                    <i class="iconfont icon-guanbi1"></i>
                    <p>举报</p>
                </div>

                <div class="moreItem">
                    <i class="iconfont icon-fenxiang"></i>
                    <p>复制链接</p>
                </div>

                <div class="moreItem">
                    <i class="iconfont icon-weibiaoti6"></i>
                    <p>删除</p>
                </div>
            </van-popup>
        </div>
        <!-- 更多弹窗 end-->
        <div class="black_cover" v-show="sideShow" @click="NoShowSide"></div>
        <transition name="slide-fade" v-cloak>
            <div class="blt_popup_left" v-show="sideShow">
                <div class="sideInformation">
                    <div class="info_panel" @click="goToInformationWin">
                        <div class="face"><img :src="userInfo.blt_avatar" alt=""></div>
                        <div class="username"><span>{{ userInfo.blt_name }}</span></div>
                        <p class="details">{{ userInfo.blt_say }}</p>
                        <div class="info_panel_blank"></div>
                    </div>
                    <div class="part">
                        <div class="part_body">
                            <ul>
                                <li>
                                    <span class="iconfont icon-vip"></span>
                                    <span class="title">点我了解会员</span>
                                    <div class="new"><i></i></div>
                                </li>
                                <li>
                                    <span class="iconfont icon-xingxing"></span>
                                    <span class="title">我的收藏</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-chahua"></span>
                                    <span class="title">个性装扮</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-bangong1"></span>
                                    <span class="title">我的钱包</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-shejishi"></span>
                                    <span class="title">与我相关</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="footbtn">
                        <div class="footbtn_item" @click="Logout">
                            <span class="iconfont icon-zhuanyiquanxian"></span>
                            <p>退出</p>
                        </div>
                        <div class="footbtn_item">
                            <span class="iconfont icon-chilun"></span>
                            <p>设置</p>
                        </div>
                        <div class="footbtn_item">
                            <span class="iconfont icon-kefu2"></span>
                            <p>客服</p>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <van-popup v-model="ReadShow" round :style="{ width: '80%',height:'80%' }" @click-overlay="readOk">
            <div class="ReadWrap">
                <div class="pic"><img :src="readMsgBoxTmp.frontPicture" alt=""></div>
                <h1>{{ readMsgBoxTmp.first_title }}</h1>
                <p class="second_title">{{ readMsgBoxTmp.second_title }}</p>
                <div class="userInfo">
                    <img :src="readMsgBoxTmp.userPoint.blt_avatar" alt="">
                    <div class="ntpanel">
                        <div>
                            <span>{{ readMsgBoxTmp.userPoint.blt_name }}</span>
                            <span class="time">{{ readMsgBoxTmp.publishTime }}</span>
                        </div>
                        <div class="publish">
                            <span> 发布于</span>
                            <span class="type">{{ readMsgBoxTmp.Itag }}</span>
                        </div>
                    </div>
                </div>
                <span class="statement">本文系用户投稿，不代表本站观点</span>
                <p class="news">{{ readMsgBoxTmp.msgText }}</p>
                <div class="details">
                    <div class="detailitem _vote"><i class="iconfont icon-shou">{{ readMsgBoxTmp.ILike }}</i></div>
                    <div class="detailitem _mark"><i class="iconfont icon-jingpinhonver">{{ readMsgBoxTmp.IComment }}</i></div>
                </div>
            </div>
        </van-popup>
    </div>
</body>

<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/local_db.js"></script>
<script type="text/javascript" src="./script/axios.min.js"></script>
<script type="text/javascript" src="./script/myscript.js"></script>
<script type="text/javascript" src="./script/SHA1.js"></script>
<script type="text/javascript" src="./script/jquery2.0.0.min.js"></script>
<script type="text/javascript" src="./script/vant.min.js"></script>
<script type="text/javascript">
    // 此功能是弹窗时候背景锁定，虽然过程可能还会动，但是结束之后会回归原样
    Vue.prototype.ModalHelper = (function(bodyCls) {
        var scrollTop
        return {
            afterOpen: function() {
                scrollTop = document.scrollingElement.scrollTop
                document.body.classList.add(bodyCls)
                document.body.style.top = -scrollTop + 'px'
            },
            beforeClose: function() {
                document.body.classList.remove(bodyCls)
                document.scrollingElement.scrollTop = scrollTop
            }
        }
    }('dialog-open'));

    var skip = 0; //跳过的条数，用来加载数据
    var limit = 1; //限制加载条数
    var loadmore = true; //标记数据库里面还有没有数据可获取
    var app = new Vue({
        el: '#container',
        data: {
            gnotice: '热烈庆祝白了头科技有限公司成立！', //系统公告栏
            isShowNotice: true, //是否显示公告栏，vue绑定
            moreBtnText: '查看更多',
            feedList: [{
                "frontPicture": "",
                "userPoint": {
                    "blt_avatar": ""
                }
            }], //不这样写会报错
            newsList: [{
                "frontPicture": "",
                "userPoint": {
                    "blt_avatar": ""
                }
            }],
            readMsgBoxTmp: {}, //中间变量，存储点击阅读时的文章信息
            showMore: false, //点击卡片右上角的图标，显示更多
            sideShow: false, //显示侧边信息栏
            hover_index: 0, //更多信息时候选中的下标，分享到QQ或者微信之类的下标
            readIndex: 0, //阅读数据中哪一条的下标
            ReadShow: false,
            userInfo: {
                blt_id: '9527',
                blt_name: '未登录',
                blt_avatar: 'https://image.gcores.com/2d362f59-3df3-454d-a3c4-5801150d08e9.jpg',
                blt_say: '有的人不在了'
            }
        },
        created()  {
            //自动加载数据
            this.loadMore();
            this.loadNews();
            this.readMsgBoxTmp = this.feedList[0];
        },
        methods: {
            //点击了阅读资讯的盒子动作
            ReadingNew: function(_index) {
                var _this = this;
                _this.ModalHelper.afterOpen();
                _this.readMsgBoxTmp = _this.newsList[_index];
                _this.ReadShow = true;
            },
            //点击了推荐盒子的动作
            ReadingFeed: function(_index) {
                var _this = this;
                _this.ModalHelper.afterOpen();
                _this.readMsgBoxTmp = _this.feedList[_index];
                _this.ReadShow = true;
            },
            //阅读结束，或者说是点击来了空白地方，关闭阅读界面的动作
            readOk: function() {
                var _this = this;
                _this.ModalHelper.beforeClose();
                _this.ReadShow = false;
            },
            //关闭系统公告栏
            NoShowNotice: function(_index) {
                this.isShowNotice = false;
            },
            //是否弹出更多选择消息框
            ShowMoreBtn: function(_index) {
                this.showMore = true;
            },
            //启动显示侧边栏动作时
            ShowSide: function(_index) {
                var _this = this;
                var url = './html/login.html';
                var message = '尚未登录。正在为您跳转登录页面!'
                var user = $api.getStorage('userInfo');
                console.log(JSON.stringify(user));
                if (user != null) {
                    app.userInfo = user;
                    app.sideShow = true;
                } else {
                    app.sideShow = false;
                    _this.$toast({
                        message: message,
                        position: 'bottom'
                    });
                    window.location.href = url;
                }
            },
            NoShowSide: function(_index) {
                this.sideShow = false;
            },
            goToPublish: function() {
                var url = './html/login.html';
                var message = '尚未登录。正在为您跳转登录页面!'
                var userInfo = $api.getStorage('userInfo');
                if (userInfo != null) {
                    url = './html/publish.html';
                    message = '网络世界也需要文明，请遵守规则！'
                }
                this.$toast({
                    message: message,
                    position: 'bottom'
                });
                window.location.href = url;
            },

            goToInformationWin: function() { //去个人详细信息页面
                goToLogin(this);
            },
            enter: function(_index) {
                this.hover_index = _index;
            },
            leave: function(_index) {
                this.hover_index = 0;
            },

            Logout: function(data) { //退出
                // sessionStorage.clear();
                $api.rmStorage('userInfo');
                window.location.reload();
            },

            loadMore: function() { //加载更多
                var _this = this;
                if (loadmore) {
                    //_this.feedList = _this.feedList.concat($lcdb.get());
                    var filter = {
                        skip: skip,
                        limit: limit,
                        include: ['userPointPointer']
                    }
                    var now = Date.now();
                    var _AppId = $blt.getAppId();
                    var _appKey = $blt.getAppKey();
                    var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                    axios.get('https://d.apicloud.com//mcm/api/feeds?filter=' + JSON.stringify(filter), {
                            headers: {
                                "X-APICloud-AppId": _AppId,
                                "X-APICloud-AppKey": appKey
                            }
                        })
                        .then(function(response) {
                            console.log('查询成功，信息如下\n');
                            console.log(JSON.stringify(response));
                            if (response.data.length < limit) {
                                app.moreBtnText = '没有更多';
                                loadmore = false;
                            }
                            if (skip == 0) {
                                app.feedList = response.data;
                            } else {
                                app.feedList = app.feedList.concat(response.data);
                            }
                            skip += limit;
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            },
            loadNews: function() { //加载最新资讯
                var _this = this;
                //_this.newsList = _this.newsList.concat($lcdb.gets());
                var filter = {
                    order: "publishTime DESC",
                    limit: 2,
                    include: ['userPointPointer']
                }
                var now = Date.now();
                var _AppId = $blt.getAppId();
                var _appKey = $blt.getAppKey();
                var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                axios.get('https://d.apicloud.com//mcm/api/messages?filter=' + JSON.stringify(filter), {
                        headers: {
                            "X-APICloud-AppId": _AppId,
                            "X-APICloud-AppKey": appKey
                        }
                    })
                    .then(function(response) {
                        console.log(JSON.stringify(response));
                        if (response.data.length) {
                            app.newsList = response.data;
                            //alert("21" + JSON.stringify(response.data));
                        } else {
                            console.log('查询条数有误，使用本地数据库\n');
                            app.newsList = $lcdb.get();
                        }
                    })
                    .catch(function(error) {
                        console.log('查询出错，错误信息如下，使用本地数据库\n');
                        console.log(error);
                        app.newsList = $lcdb.get();
                    });
            }
        }
    });

    function goToLogin(_this) {
        var url = './html/login.html';
        var message = '尚未登录。正在为您跳转登录页面!'
        var userInfo = $api.getStorage('userInfo');
        if (userInfo != null) {
            _this.sideShow = false;
            window.location.href = './html/userInformation.html';
        } else {
            _this.$toast({
                message: message,
                position: 'bottom'
            });
            window.location.href = url;
        }
    }
</script>

</html>
